<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>旅行信息</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/mui.picker.css" />
	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
	<link rel="stylesheet" href="../css/mui.poppicker.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		.mui-input-group .mui-input-row {
			height: 55px;
		}
		.mui-input-row label {
			padding: 0 15px;
			line-height: 55px;
		}
		.mui-input-row label~input {
			margin-top: 7px;
		}
		.mui-input-row label~input::-webkit-input-placeholder {
			color: #999;
		}
		.mui-input-row label,label~input {
			font-family: 'PingFangSC-Regular';
		    font-size: 14px;
		    color: #666666;
		}
		.down-select {
			float: right;
			width: 65%;
			font-family: 'PingFangSC-Regular';
		    font-size: 14px;
		    color: #666666;
		    line-height: 55px;
		}
		.down-select label {
			width: 80%;
			padding: 0;
			color: #333;
		}
		.down-select img {
			float: right;
			margin-top: 10px;
			margin-right: 18px;
			width: 28px;
		    height: 28px;
		    vertical-align: middle;
		}
		.mui-input-row .label-title {
			width: 100%;
			background: #FAFAFA;
			text-align: center;
			font-size: 16px;
			color: #333333;
		}
		.prompt-font {
			margin-left: 14px;
			margin-top: 5px;
			font-size: 12px;
			color: #999;
		}
		#isBeenJapan {
			display: none;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">旅行信息</h1>
	</header>
	<div class="mui-content">
		<form class="mui-input-group" style="padding-bottom: 10px;">
			<input type="hidden" id="travelInfoId" />
			<div class="mui-input-row">
				<label>访问目的</label>
				<div id="showObjective" class="down-select">
					<label id="objectiveResult">请选择</label>
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
			<div class="mui-input-row">
				<label>入境口岸</label>
				<div id="showPort" class="down-select">
					<label id="portResult">请选择</label>
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
			<div class="prompt-font">注：若选择“冲绳”则必须从冲绳入境，其他口岸无法入境</div>
			<div class="mui-input-row">
				<label>预计入境日期</label>
				<div data-options='{"type":"date"}' class="down-select showDatePicker">
					<label id="entryTime" class="dateResult"></label>
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
			<div class="mui-input-row">
				<label>预计离境日期</label>
				<div data-options='{"type":"date"}' class="down-select showDatePicker">
					<label id="departureTime" class="dateResult"></label>
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
			<div class="mui-input-row">
				<label style="margin-top: 5px;line-height: 22px;">曾经是否去过日本</label>
				<div id="showBeenJapan" class="down-select">
					<label id="beenJapanResult"></label>
					<input type="hidden" id="isTo" />
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
			<div id="isBeenJapan">
				<div class="mui-input-row">
					<label>上次赴日日期</label>
					<div data-options='{"type":"date"}' class="down-select showDatePicker">
						<label id="lastTime" class="dateResult"></label>
						<img src="../img/detail/down_color_icon.png" />
					</div>
				</div>
				<div class="mui-input-row">
					<label>上次停留时间</label>
					<input type="number" id="stayDays" placeholder="天" value="" >
				</div>
			</div>
			<div class="mui-input-row">
				<label style="margin-top: 5px;line-height: 22px;">在任何国家曾被判决有罪</label>
				<div id="showIsGuilt" class="down-select">
					<label id="isGuiltResult"></label>
					<input type="hidden" id="isCrime" />
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
		</form>
		<div class="transaction-container"><button type="button">保存</button></div>
	</div>	
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var customerId = base.getParameter("customerId");
		var applyCustomerId = base.getParameter("applyCustomerId");
		var countryId = base.getParameter("countryId");
		(function($, doc) {
			$.init();
			initTravelJapan();
			//访问目的
			var objectivePicker = new $.PopPicker();
			objectivePicker.setData([{
				value: '1',
				text: '旅游'
			}, {
				value: '2',
				text: '商务'
			}]);
			var showObjectiveButton = doc.getElementById('showObjective');
			var objectiveResult = doc.getElementById('objectiveResult');
			showObjectiveButton.addEventListener('tap', function(event) {
				objectivePicker.show(function(items) {
					objectiveResult.innerText = _getParam(items[0], "text");
				});
			}, false);
			//入境口岸
			var protData = [{value:'东京',text:'东京'},{value:'大阪',text:'大阪'},{value:'名古屋',text:'名古屋'},{value:'京都',text:'京都'},{value:'神户',text:'神户'},
							{value:'北九州',text:'北九州'},{value:'横须贺',text:'横须贺'},{value:'札幌',text:'札幌'},{value:'北海道',text:'北海道'},{value:'福冈',text:'福冈'},
							{value:'广岛',text:'广岛'},{value:'横滨',text:'横滨'},{value:'冲绳',text:'冲绳'}]
			var portPicker = new $.PopPicker();
			portPicker.setData(protData);
			var showPortButton = doc.getElementById('showPort');
			var portResult = doc.getElementById('portResult');
			showPortButton.addEventListener('tap', function(event) {
				portPicker.show(function(items) {
					portResult.innerText = _getParam(items[0], "text");
				});
			}, false);
			//时间选择器
			$(".mui-input-group").on('tap', '.showDatePicker',function(e) {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					_self.picker = new $.DtPicker(options);
					_self.picker.show(function(rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				}
			}, false);
			//是否去过日本
			var beenJapanPicker = new $.PopPicker();
			beenJapanPicker.setData([{
				value: '1',
				text: '是'
			}, {
				value: '2',
				text: '否'
			}]);
			var showBeenJapanButton = doc.getElementById('showBeenJapan');
			var beenJapanResult = doc.getElementById('beenJapanResult');
			showBeenJapanButton.addEventListener('tap', function(event) {
				beenJapanPicker.show(function(items) {
					beenJapanResult.innerText = _getParam(items[0], "text");
					if (_getParam(items[0], "value") == 1) {
						jQuery("#isBeenJapan").show();
						jQuery("#isTo").val(1);
					}else if (_getParam(items[0], "value") == 2) {
						jQuery("#isBeenJapan").hide();
						jQuery("#isTo").val(0);
					}
				});
			}, false);
			//是否判决有罪
			var showIsGuiltButton = doc.getElementById('showIsGuilt');
			var isGuiltResult = doc.getElementById('isGuiltResult');
			showIsGuiltButton.addEventListener('tap', function(event) {
				beenJapanPicker.show(function(items) {
					isGuiltResult.innerText = _getParam(items[0], "text");
					if (_getParam(items[0], "value") == 1) {
						jQuery("#isCrime").val(1);
					}else if (_getParam(items[0], "value") == 2) {
						jQuery("#isCrime").val(0);	
					}
				});
			}, false);
		})(mui, document);
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		//获取旅行信息
		function initTravelJapan(){
			base.setWait('正在获取数据');
			let url = base.url.getTravelInfo;
			var params = {
				customerId: customerId,
				applyCustomerId: applyCustomerId,
				cuntryId: countryId
			}
			base.postData(url, params, getTravelInfoSuccess);
		}
		function getTravelInfoSuccess(data) {
			if (data.success) {
				if (data.extendData) {
					$("#travelInfoId").val(data.extendData.travelInfoId);
					$("#objectiveResult").text(data.extendData.visitPurpose);
					$("#portResult").text(data.extendData.portEntry);
					$("#entryTime").text(data.extendData.entryTime);
					$("#departureTime").text(data.extendData.departureTime);
					if (data.extendData.isTo == 1) {
						$("#beenJapanResult").text("是");
						$("#isBeenJapan").show();
						$("#lastTime").text(data.extendData.lastTime);
						$("#stayDays").val(data.extendData.stayDays);
					}
					if (data.extendData.isTo == 0) {
						$("#beenJapanResult").text("否");
					}
					if (data.extendData.isCrime == 1) {
						$("#isGuiltResult").text("是");						
					}
					if (data.extendData.isCrime == 0) {
						$("#isGuiltResult").text("否");
					}
				}
			}
		}
		//保存日本旅行信息
		$(".transaction-container").on('tap', 'button', function(){
			var objectiveResult = $("#objectiveResult").text();
			if (objectiveResult == "" || objectiveResult == "请选择") {
				mui.toast("请选择访问目的");
				return;
			}
			var portResult = $("#portResult").text();
			if (portResult == "" || portResult == "请选择") {
				mui.toast("请选择入境口岸");
				return;
			}
			var entryTime = $("#entryTime").text();
			if (entryTime == "") {
				mui.toast("请填写预计入境日期");
				return;
			}
			var departureTime = $("#departureTime").text();
			if (departureTime == "") {
				mui.toast("请填写预计离境日期");
				return;
			}
			var beenJapanResult = $("#beenJapanResult").text();
			if (beenJapanResult == "") {
				mui.toast("请选择曾经是否去过日本");
				return;
			}
			var lastTime = $("#lastTime").text();
			var stayDays = $("#stayDays").val();
			if (beenJapanResult == "是") {
				if (lastTime == "") {
					mui.toast("请选择上次赴日日期");
					return;
				}
				if (stayDays == "") {
					mui.toast("请填写上次停留时间");
					return;
				}
			}
			var isGuiltResult = $("#isGuiltResult").text();
			if (isGuiltResult == "") {
				mui.toast("请选择在任何国家曾被判决有罪");
				return;
			}
			var data = {
				applyCustomerId:applyCustomerId,
				customerId:customerId,
				cuntryId: countryId,
				travelInfoId: $("#travelInfoId").val(),
				visitPurpose:objectiveResult,
				portEntry:portResult,
				entryTime:entryTime,
				departureTime:departureTime,
				isTo:$("#isTo").val(),
				lastTime:$("#lastTime").text(),
				stayDays:stayDays,
				isCrime:$("#isCrime").val()
			}
			base.setWait('正在保存，请稍后！');
			base.postData(base.url.addTravelInfo, data, addTravelInfoSuccess);
		});
		function addTravelInfoSuccess(data) {
			mui.toast(data.message);
			if (data.success) {
				setTimeout(function() {
					mui.back();
				}, 1000);
			}
		}
	</script>
</body>
</html>
